<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
			width: 120px;
			display: flex;
			flex-direction:column ;
			justify-content: center;
			align-items: center;
			margin: 10px;
		}
		ul{
			display: flex;
			flex-wrap: wrap;
		}
		.box{
			width: 800px;
			margin: 0 auto;
		}

	</style>
</head>
<body>
<div class="box">
	<ul>
	</ul>
</div>

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
	let ul = document.querySelector('ul')
	ajax({
		method:'get',
		url:'https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js',
		params:{
			v:58
		},
		success:function(res) {
			console.log(res)
			for(let i = 0;i < res.hero.length; i++){
				ul.innerHTML += `
						<li>
							<img onclick = 'jump(${res.hero[i].heroId})' src="https://game.gtimg.cn/images/lol/act/img/champion/${res.hero[i].alias}.png ">
							<span>${res.hero[i].name}</span>
						</li>
					`
			}
		}
	})
	function jump(id){
		location.href = `./detail.html?id=${id}`
	}
</script>
</body>
</html>